import React, {useState, useEffect} from 'react';
import type {ProSettings} from '@ant-design/pro-layout';
import ProLayout, {DefaultFooter, SettingDrawer} from '@ant-design/pro-layout';
// import type {MenuDataItem} from '@ant-design/pro-layout';
import {useLocation, Outlet, Link} from 'react-router-dom';
import {Avatar} from 'antd';
import {UserOutlined} from '@ant-design/icons';
import {connect} from 'react-redux';
import classNames from 'classnames';
import HeaderMenu from '@/components/HeaderMenu';
import _ from 'lodash';
import LOGO from '@/assets/images/logo.png';
import './index.less';

const Index = (props: any) => {

    const location = useLocation();

    const defaultProps = props.menuData;
    const [settings, setSetting] = useState<Partial<ProSettings> | undefined>({
        fixSiderbar: true,
        layout: 'mix',
        navTheme: 'light',
    });
    const [pathname, setPathname] = useState(location.pathname || '/');

    useEffect(() => {
        props.dispatch({
            type: 'MENU_LEATC',
        });
    }, []);

    useEffect(() => {
        setPathname(location.pathname);
    }, [location.pathname]);

    // const renderIcon = (icon: any) => {
    //     return <span>
    //         <img style={{width: '14px', height: '14px'}} src={icon} alt=""/>
    //     </span>;
    // };

    // const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] => {
    //     return menus.map(({icon, routes, ...item}) => ({
    //         ...item,
    //         icon: icon,
    //         routes: routes && loopMenuItem(routes),
    //     }));
    // };

    return (
        <div
            id="ant-pro-layout"
            style={{
                height: '100vh',
            }}
        >
            {
                _.isEmpty(defaultProps) ? null : <>
                    <ProLayout
                        menu={{request: async () => defaultProps}}
                        fixSiderbar
                        fixedHeader
                        location={{
                            pathname,
                        }}
                        logo={<img src={LOGO} alt="logo"/>}
                        title={'开发平台'}
                        menuHeaderRender={() => undefined}
                        headerContentRender={() => <HeaderMenu menuData={defaultProps}/>}
                        headerRender={(prop) => {
                            const {
                                layout: basicLayout,
                                logo,
                                title,
                                siderWidth,
                                headerContentRender,
                                rightContentRender,
                                headerTheme,
                            } = prop;
                            return <div
                                className={classNames({
                                    'ant-pro-global-header': true,
                                    [`ant-pro-global-header-layout-${basicLayout}`]: basicLayout,
                                })} style={{padding: 0, backgroundColor: '#D20C11'}}>
                                <div
                                    className={'ant-pro-global-header-logo'}
                                    style={{width: siderWidth, maxWidth: siderWidth, padding: '0 8px'}}>
                                    <a>
                                        {logo}
                                        <h1>{title}</h1>
                                    </a>
                                </div>
                                <div
                                    style={{flex: '1 1 0%'}} className={classNames({
                                    [`l-index-header-${headerTheme}`]: headerTheme,
                                })}>{headerContentRender && headerContentRender(props)}
                                </div>
                                <div style={{padding: '0 12px'}}>
                                    {rightContentRender && rightContentRender(props)}
                                </div>
                            </div>;
                        }}
                        onMenuHeaderClick={(e) => console.log(e, 22222222222222222)}
                        rightContentRender={() => (<Avatar shape="square" size="small" icon={<UserOutlined/>}/>)}
                        menuItemRender={(item, dom) => {
                            return <Link
                                to={item.path}
                                onClick={() => {
                                    setPathname(item.path);
                                }}
                            >
                                {dom}
                            </Link>;
                        }}
                        footerRender={() => (
                            <DefaultFooter
                                style={{background: '#fff'}}
                                links={[
                                    {key: 'test', title: '友情链接', href: 'http://test.leatc.cn:1988'},
                                ]}
                                copyright="创力科技"/>
                        )}
                        {...settings}
                    >

                        <Outlet/>
                    </ProLayout><SettingDrawer
                    pathname={pathname}
                    enableDarkTheme
                    getContainer={() => document.getElementById('ant-pro-layout')}
                    settings={settings}
                    onSettingChange={(changeSetting) => {
                        setSetting(changeSetting);
                    }}
                    disableUrlParams/>
                </>
            }
        </div>
    );
};

const mapStateToProps = (state) => {
    const {menuDataReducer} = state;
    return {
        menuData: menuDataReducer.menuData,
    };
};

export default connect(mapStateToProps)(Index);

